<template>
    <div style="border: 1px solid rgb(230, 230, 230);padding: 10px;">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="关键字">
                    <el-input placeholder="审批编号/标题/手机号码/姓名" style="width: 100%;" clearable />
                </el-form-item>
            </el-col>

            <!-- 状态 -->
            <el-col :span="1" style="padding-top: 5px;"> <el-text class="mx-1" size="large">状态</el-text></el-col>
            <el-col :span="4">
                <el-select v-model="value" placeholder="请选状态" style="width: 240px">

                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-col>
            <!-- 时间 -->
            <el-col :span="10" :offset="1">
                <div class="block">
                    <span class="demonstration">操作时间 </span>
                    <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" :size="size" />
                </div>
            </el-col>

            <el-row>
                <el-col :span="2">
                    <el-button type="primary"><el-icon style="margin-right: 5px;">
                            <Search />
                        </el-icon>搜索</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button><el-icon style="margin-right: 5px;">
                            <Refresh />
                        </el-icon>重置</el-button>
                </el-col>
            </el-row>
            </el-row>
    </div>


    <el-table :data="tableData" border stripe style="width: 100%;margin-top: 20px;">
        <el-table-column prop="date" label="序号" width="80" />
        <el-table-column prop="name" label="审批编号" width="180" />
        <el-table-column prop="address" label="标题" />
        <el-table-column prop="address" label="用户" width="100" />
        <el-table-column prop="address" label="审批类型" />
        <el-table-column prop="address" label="审批模板" />
        <el-table-column prop="address" label="描述" />
        <el-table-column prop="address" label="状态" />
        <el-table-column prop="address" label="创建时间" />
        <el-table-column label="操作">
            <a>查看</a>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">

        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :size="size" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>

</template>
<script lang="ts" setup>

import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'

const currentPage4 = ref(4)

const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

// 时间
const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
// 表格数据
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: '1',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: '1',
    },
]

//   状态内容
const value = ref('')
const options = [
    {
        value: '1',
        label: '进行中',
    },
    {
        value: '2',
        label: '已完成',
    },
    {
        value: '3',
        label: '驳回',
    },
]
</script>

<style scoped>
.demo-pagination-block {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}
</style>